<template>
    <div id="Home" class="homeView">
        <!-- 用来放随机定位的悬浮文字块 -->
        <div class="backgroundMask">
            <div class="backgroundMask-contentItem" v-for="(maskContentItem, index) in maskContentArr" :key="maskContentItem + index">
                <span :style="{ top: maskContentItem.top + 'px', left: maskContentItem.left + 'px' }">{{ maskContentItem.content }}</span>
            </div>
            <!-- 背景粒子特效 -->
            <vue-particles
                color="#000000"
                :particleOpacity="0.7"
                :particlesNumber="25"
                shapeType="circle"
                :particleSize="2"
                linesColor="#333333"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="2"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="repulse"
            />
        </div>
        <!-- 标题 -->
        <div class="titleBox">
            <h1 class="titleBox-title">TBJIE</h1>
            <h2 class="titleBox-subTitle">一款专用于解决问题的网站</h2>
        </div>
        <!-- 按钮 -->
        <div class="lookInButton">
            <SliderSwitchButton
                buttonLink="registerLog"
                buttonContent="进去康康"
                buttonIconType="fa-hand-o-right"
            />
        </div>
        <!-- 底部浮动版权信息栏 -->
        <CopyrightBox/>
    </div>
</template>

<script>
    import CopyrightBox from "../components/CopyrightBox.vue"
    import SliderSwitchButton from "../components/SliderSwitchButton.vue"

    export default {
        name: "Home",
        components: {
            CopyrightBox,
            SliderSwitchButton
        },
        data() {
            return {
                maskContentArr: [
                    { content: '这里放一些尬到爆炸的宣传语', top: '132', left: '267' },
                    { content: '这里放一些尬到爆炸的宣传语', top: '324', left: '1324' }
                ]
            }
        },
        created() {
            // console.log(this.$jsCookie.get());
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../assets/stylesheets/animation.scss";

    .homeView {
        position: relative;
        z-index: 0;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
    .backgroundMask {
        position: absolute;
        height: 85%;
        width: 85%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .backgroundMask-contentItem {
        position: absolute;
        width: 1em;
        line-height: 1.5em;
        font-size: 16px;
        font-weight: 300;
        cursor: default;

        &>span {
            position: relative;
            display: inline-block;
            padding: 0.25em 0.15em;
            background: rgba(255, 255, 255, 0.75);
            color: #666666;
            transition: all linear 0.4s;
            animation: upAndDown 3s linear infinite;
            animation-play-state: running;
        }

        &>span:hover{
            background: #999999;
            color: #ffffff;
            animation-play-state: paused;
        }
    }

    .titleBox {
        position: relative;
        display: inline-block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.75);
        text-align: center;
        cursor: default;
    }
    .titleBox-title {
        margin-bottom: 24px;
        font-size: 64px;
        font-weight: 300;
        text-indent: 0.5em;
        letter-spacing: 0.5em;
    }
    .titleBox-subTitle {
        font-size: 32px;
        font-weight: 300;
        text-indent: 0.5em;
        letter-spacing: 0.5em;
    }

    .lookInButton {
        position: relative;
        top: 55vh;
        text-align: center;
    }
</style>
